<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
    <!--按钮的种类-->
    <div class="container">
        <button type="button" class="btn btn-default">default</button>
        <button type="button" class="btn btn-primary">primary</button>
        <button type="button" class="btn btn-success">success</button>
        <button type="button" class="btn btn-info">info</button>
        <button type="button" class="btn btn-warning">warning</button>
        <button type="button" class="btn btn-link">link</button>
        <button type="button" class="btn btn-danger">danger</button>
    </div>

    <!--按钮的大小,btn-lg,btn-sm,btn-xs-->
    <div class="div">
        <button type="button" class="btn btn-info btn-lg">info</button>
        <button type="button" class="btn btn-info">info</button>
        <button type="button" class="btn btn-info btn-sm">info</button>
        <button type="button" class="btn btn-info btn-xs">info</button>
    </div>
    <!--btn-block让按钮全屏-->
    <button type="button" class="btn btn-default btn-block">hello</button>

    <!--在通常情况下,button元素和a元素比较相似,active表示激活状态;disabled="disabled"表示禁用状态-->
    <a href="#" class="btn btn-default btn-lg active" role="button">default</a>
    <a href="#" class="btn btn-default btn-lg" role="button" disabled="disabled">default</a>
    <!--input元素也可以表示按钮,但是建议使用button,因为在老版本firefox中可能会出现高度无法确定的问题-->
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="submit">
    <input class="btn btn-default" type="datetime" value="datetime">

    <!--图片的设置:img-circle表示圆形的效果;img-rounded表示圆角正方形的效果;img-thumbnail表示带边框的效果-->
    <img src="" alt="" class="img-circle">
    <img src="" alt="" class="img-rounded">
    <img src="" alt="" class="img-thumbnail">
</body>
</html>

















